<template>
  <el-popover
      @click="copyHide"
      placement="top-start"
      trigger="hover">
    <div class="task-table-item-address-subtitlebox">
      <span class="task-table-item-address-subtitle">{{ copyTitle }}</span>
    </div>
    <el-button class="task-table-item-address" slot="reference" @click="copyClick">{{adress}}</el-button>
  </el-popover>
</template>

<script>
export default {
  name: "index",
  data(){
    return{
      copyTitle:'点击复制任务地址'
    }
  },
  props:[
	  'adress'
  ],
  methods:{
    copyClick(){
      this.copyTitle = '复制成功'
    },
    copyHide(){
      this.copyTitle = '点击复制任务地址'
    }
  }
}
</script>

<style scoped>
.task-table-item-address{
  margin-right: 10px;
  padding: 5px 5px;
  background: #f5f6f8;
  border: 0;
  border-radius: 2px;
  white-space: nowrap;
  cursor: pointer;
  color: #909aaa;
  font-size: 12px;
  width: 60px;
  box-sizing: border-box;
}

.task-table-item-address:hover{
  color: #333;
  background: #e7e9ee;
}

.task-table-item-address-subtitlebox{
  padding:15px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.task-table-item-address-subtitle{
  font-size: 14px;
  color: #333333;
  font-weight: 700;
  text-align: center;
}
</style>
